<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>掌上工单</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
			html,body {
				background-color: #efeff4;
			}
			.title{
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
			.mui-control-content {
				background-color: white;
				min-height: 215px;
			}
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
		
			.mui-bar~.mui-content .mui-fullscreen {
				height: auto;
			}
			.mui-pull-top-tips {
				position: absolute;
				top: -20px;
				left: 50%;
				margin-left: -25px;
				width: 40px;
				height: 40px;
				border-radius: 100%;
			}
			.mui-pull-top-wrapper {
				width: 42px;
				height: 42px;
				display: block;
				text-align: center;
				background-color: #efeff4;
				border: 1px solid #ddd;
				border-radius: 25px;
				background-clip: padding-box;
				box-shadow: 0 4px 10px #bbb;
				overflow: hidden;
			}
			.mui-pull-top-tips.mui-transitioning {
				-webkit-transition-duration: 200ms;
				transition-duration: 200ms;
			}
			.mui-pull-top-tips .mui-pull-loading {
				margin: 0;
			}
			.mui-pull-top-wrapper .mui-icon,
			.mui-pull-top-wrapper .mui-spinner {
				margin-top: 7px;
			}
			.mui-pull-bottom-tips {
				text-align: center;
				background-color: #efeff4;
				font-size: 15px;
				line-height: 40px;
				color: #777;
			}
			.mui-pull-top-canvas {
				overflow: hidden;
				background-color: #fafafa;
				border-radius: 40px;
				box-shadow: 0 4px 10px #bbb;
				width: 40px;
				height: 40px;
				margin: 0 auto;
			}
			.mui-pull-top-canvas canvas {
				width: 40px;
			}
			.mui-slider-indicator.mui-segmented-control {
				background-color: #efeff4;
			}
			.danger{
				color: #dd524d;
			}
			.success{
				color: #4cd964;
			}
			.primary{
				color: #007aff;
			}
			.warning{
				color: #f0ad4e;
			}
			.purple{
				color: #8a6de9;
			}
			.black{
				color:#000000;
			}
			.xhz-child{}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#unaccept">
							待接受工单
						</a>
						<a id="toGoingon" class="mui-control-item" href="#goingon">
							进行中工单
						</a>
						<a class="mui-control-item mui-hidden" href="#delay">
							延时工单
						</a>
						<a class="mui-control-item" href="#complete">
							已完成工单
						</a>
						<a class="mui-control-item mui-hidden" href="#groups">
							组员工单
						</a>
					</div>
				</div>
				<div class="mui-slider-group" id="list">
					
					<div id="unaccept" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view" data-type="unaccept">
								</ul>
							</div>
						</div>
					</div>
					<div id="goingon" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view" data-type="goingon">
									
								</ul>
							</div>
						</div>
					</div>
					
					<div id="delay" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view" data-type="delay">
									
								</ul>
							</div>
						</div>
					</div>
					<div id="complete" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view" data-type="complete">
									
								</ul>
							</div>
						</div>
					</div>
					<div id="groups" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view" data-type="groups">

								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script type="text/javascript" src="../js/mui.pullToRefresh.js"></script>
	<script type="text/javascript" src="../js/mui.pullToRefresh.material.js"></script>
	<script type="text/javascript" src="../js/md5.js" ></script>
	<script type="text/javascript" src="../js/uuid.js" ></script>
	<script type="text/javascript" src="../js/utils.js" ></script>
	<script type="text/javascript" src="../js/arttmpl.js"></script>
	<script id='workorder-template' type="text/template">
		<% if(row){ %>
		<a id="node_<%=(row.id || '')%>" data-date="<%=(row.udate || '' )%>" hrefid="task-detail-<%=(row.dtype || '')%>" href="task-detail-<%=(row.dtype || '')%>.html?taskId=<%=(row.id || '')%>" class="mui-navigate-right xhz-child">
			<p class="mui-pull-right mui-h5 danger"><%=(row.type == 1 ? "" :"指定时间")%></p>
			<div class="mui-media-body">
			    <p class="mui-ellipsis mui-h4 black">编号：<%=(row.code || '')%></p>
			    <p class="mui-h5">名称：<%=(row.name || '')%> </p>
			    <p class="mui-h5 mui-ellipsis">类型：<%=(row.type == 1 ? "非指定时间" :"指定时间")%> </p>
			    <p class="mui-h5">下发时间：<%=(row.createTime || '')%></p>
			</div>
		</a>
        <%}%>
	</script>
	<script>
		var aniShow = "pop-in";
		 //只有ios支持的功能需要在Android平台隐藏；
		if (mui.os.android) {
			var list = document.querySelectorAll('.ios-only');
			if (list) {
				for (var i = 0; i < list.length; i++) {
					list[i].style.display = 'none';
				}
			}
			//Android平台暂时使用slide-in-right动画
			if(parseFloat(mui.os.version)<4.4){
				aniShow = "slide-in-right";
			}
		}
	
		//主列表点击事件
		mui('.mui-slider-group').on('tap', 'a', function() {
			var hrefId = this.getAttribute('hrefid');
			var href = this.href;
			
			mui.openWindow({
				id: hrefId,
				url: href,
				show: {
					aniShow: aniShow
				},
				waiting: {
					autoShow: true
				}
			});
		});
		var index = null; //主页面
		 
		//在android4.4.2中的swipe事件，需要preventDefault一下，否则触发不正常
		window.addEventListener('dragstart', function(e) {
			mui.gestures.touch.lockDirection = true; //锁定方向
			mui.gestures.touch.startDirection = e.detail.direction;
		});
		window.addEventListener('dragright', function(e) {
			if (!mui.isScrolling) {
				e.detail.gesture.preventDefault();
			}
		});
		 
		
		// 选项卡切换和下拉刷新
		mui.init({
			gestureConfig : {
		        longtap:false
		    }  
		});
		
		(function($) {
			var pulls = [] ;
			var tashStatus = {} ;
			tashStatus['unaccept'] = 1 ;
			tashStatus['goingon'] = 2 ;
			tashStatus['complete'] = 2 ;
			tashStatus['delay'] = 2 ;
			tashStatus['groups'] = 2 ;
			
			/**跟标签顺序保持一致*/
			var sidebars = ['unaccept', 'goingon', 'delay', 'complete', 'groups'] ;
			/**控制每个tab中是否有数据*/
			var sideBarDatas = {} ;
			sideBarDatas['unaccept'] = true ;
			sideBarDatas['goingon'] = true ;
			sideBarDatas['complete'] = true ;
			sideBarDatas['delay'] = true ;
			sideBarDatas['groups'] = true ;
			
			template.config('escape', false);
			//阻尼系数
			var deceleration = mui.os.ios?0.003:0.0009;
			$('.mui-scroll-wrapper').scroll({
				bounce: false,
				indicators: true, //是否显示滚动条
				deceleration:deceleration
			});
			
			$.plusReady(function() {
				
				document.getElementById('slider').addEventListener('slide', function(e) {
					var _slideNumber = e.detail.slideNumber ;
					var _slide = sidebars[_slideNumber] ;
					var _slidePull = pulls[_slideNumber] ;
					var _isEmptyData = sideBarDatas[_slide] ;
					
					if(_slidePull && _isEmptyData){
						_slidePull.pullUpLoading();
					}
				});
				
				
				//循环初始化所有下拉刷新，上拉加载。
				$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
					
					var pull = $(pullRefreshEl).pullToRefresh({
						down: {
							callback: function() {
								var self = this;
								setTimeout(function() {
									var ul = self.element.querySelector('.mui-table-view');
									var children = self.element.querySelectorAll(".mui-table-view .xhz-child");
									if(children.length > 0){
										timestamp = children[0].getAttribute("data-date") ;
										createAndInsertFragment(false,ul,8,"down" ,timestamp);
									}else{
//										timestamp = 0 ;
										mui.toast("请点击显示更多");
									}
									
									self.endPullDownToRefresh();
								}, 500);
							}
						},
						up: {
							auto: false,
							callback: function() {
								var self = this;
								setTimeout(function() {
									var ul = self.element.querySelector('.mui-table-view');
									var children = self.element.querySelectorAll(".mui-table-view .xhz-child");
									if(children.length == 0){
										var dtype = ul.getAttribute("data-type");
										tashStatus[''+dtype] = 1;
									}
									createAndInsertFragment(true,ul,8,"up",'');
									self.endPullUpToRefresh(); 
								}, 500);
								
							}
						}
					});
					
					pulls.push(pull) ;
				});
				
				/**
				 * 创建并添加文档碎片
				 * @param {Object} count 一次显示的条目
				 * @param {Object} reverse 指定是正向插入还是反向插入
				 * @param {Object} parent 父级元素
				 */
				var createAndInsertFragment = function(reverse,parent,pageSize,upOrDown,timestamp) {
					var dtype = parent.getAttribute("data-type");
						var page = ('down' == upOrDown) ? 0 : tashStatus[''+dtype] ;
//						console.debug("mtype is " + dtype + "   page is  "+ page)
						xhz.ajax(EMC_URL_TASK,{page:page + '', pageSize:pageSize, upOrDown:upOrDown,status:dtype,updateTime:timestamp || ''},function(data){
						
						if(!data || data.code != 1){
							mui.toast('你刷的太勤快了，亲');
							return ;
						}
						afterGotData(data.data ,dtype,upOrDown);
					}) ;
					/**
					 * 处理数据逻辑
					 * @param {Object} data
					 */
					function afterGotData(data ,dtype,upOrDown) {
						if(!data || !data[0]){
							mui.toast('亲，暂时没有别的任务了');
							return;
						}
						//有数据page+1
						if('down' == upOrDown){
							var mainPage = plus.webview.getWebviewById('main') ;
							if(mainPage){
								mui.fire(mainPage,'tips:clear',{id:'mui-icon-home'});
							}
						}else{
							tashStatus[''+dtype] = tashStatus[''+dtype] + 1 ;
						}
						
						sideBarDatas[''+dtype] = false ;
						var fragment = document.createDocumentFragment();
						var li;
						
						$.each(data ,function(){
							li = document.createElement('li');
							li.className = 'mui-table-view-cell mui-media';
							var $row = this ;
							$row.dtype = dtype ;
							var detailInfo = template('workorder-template', {
								"row": $row
							});
//							li.innerHTML = getLiInnerHTML(this , dtype);
							li.innerHTML = detailInfo ;
							fragment.appendChild(li);
						}) ;
						// 将文档碎片插入到DOM节点
						reverse ? parent.appendChild(fragment) : parent.insertBefore(fragment, parent.firstChild);

					}
				};
				
//				var indexpage = mui.currentWebview.parent().parent();
//				mui.fire(indexpage, "wait:close");
				pulls[0].pullUpLoading();
			});
			
			removeNode = function(e){
				var nodeId = e.detail.id ;
				var node = document.getElementById(nodeId) ;
				if(node){
					var li = node.parentNode;
					if(li){
						li.parentNode.removeChild(li);
						var indexPage = plus.webview.getWebviewById('index');
						indexPage.show() ;						
					}
				}
				
			}
			window.addEventListener("taskinfo:remove", removeNode);

		})(mui);
	</script>

</html>
